<template>
  <div class="index-form form-contain">
    <div class='common-banner' :style='{backgroundImage: `url(${this.banner})`}'></div>
    <div class="resource-body">
      <div class="resource-one" v-for='(item, index) in resourceList' :key='index'>
        <div class="resource-title">
          {{item.title}}
        </div>
        <div class="resource-desc">
          {{item.desc}}
        </div>
        <div class="resource-list">
          <img :src='i.image' class="resource-icon" v-for='(i, x) in item.channel' :key='x'>
        </div>
        <router-link class="resource-btn" :to="item.source_info">
          查看详情 >
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getZiyuan } from '@/api/ajax'
export default {
  data () {
    return {
      banner: '',
      resourceList: []
    }
  },
  mounted () {
    getBanner({type: 2}).then(res => {
      this.banner = res.data.list[0].image
    })
    getZiyuan({use_info: 1}).then(res => {
      this.resourceList = res.data.list
    })
  },
  methods: {}
}
</script>

<style lang="less">
.resource-body{
  padding: 1rem 1.33rem;
  overflow: hidden;
  .resource-one:hover{
    border-color: #3B81C7!important;
    .resource-btn{
      color: #3B81C7;
    }
  }
  .resource-one{
    width: 10.47rem;
    height: 11.47rem;
    border: 1px solid #B6B6B6;
    box-sizing: border-box;
    float: left;
    margin-left: 1.33rem;
    margin-bottom: 1.33rem;
    &:nth-child(2n + 1){
      margin: 0;
    }
    .resource-title{
      text-align: center;
      font-size: .8rem;
      line-height: 2.67rem;
    }
    .resource-desc{
      font-size: .53rem;
      padding: 0 .67rem;
      box-sizing: border-box;
      height: 3.27rem;
    }
    .resource-list{
      margin-top: 1rem;
      text-align: center;
      margin-bottom: .47rem;
      img{
        height: 1.2rem;
        width: 1.2rem;
        + img{
          margin-left: .67rem;
        }
      }
    }
    a.resource-btn{
      display: block;
      color: #B6B6B6;
      text-align: center;
      font-size: .6rem;
      line-height: 2.53rem;
      border-top: 1px solid #B6B6B6;
    }
  }
}
</style>
